import { useEffect, useMemo, useState } from "react";
import { Result } from "antd";

export default function Study(props: { defaultArr: any }) {
    const { defaultArr } = props;
    const [state, _setState] = useState({
        arr: defaultArr.slice(1),
        current: defaultArr?.[0],
        prev: null
    });
    const setState = (params: { [key: string]: any }) => {
        _setState((_state) => ({ ..._state, ...params }));
    };
    const {arr , current, prev} = state;
   
    function show(step:number) {
        if(arr.length && step === 1){
            setState({
                current: arr[0],
                arr: arr.slice(1)
            })
        } else if(step === -1 && prev){

        }
        else{
            setState({
                current: null,
                // arr: arr.slice(1, arr.length-1)
            }) 
        }
    }
    function eventListener(event: KeyboardEvent) {
        setTimeout(() => {
            console.log(event, 'event')
            if (event.code === 'ArrowDown') {
                show(1);
            }
            if (event.code === 'ArrowUp') {
                show(-1);
            }
        }, 1);
    }

    useEffect(() => {
        document.addEventListener('keydown', eventListener);
        // show()
        return () => {
            document.removeEventListener('keydown', eventListener)
        }
    }, [])
    return <div>
        {
            current? <div style={{textAlign: 'center'}}>
                <div style={{fontSize: '80px'}}>{current.pinyin}</div>
                <img src={current.img} style={{margin: '0 auto', width:'200px'}}/>
            </div>:<Result />
        }
    </div>
}